<template>
  <div class="show-dv" id="small"></div>
  <div class="video-box" ref="videoDv">
    <teleport to="#small" :disabled="show">
      <div id="mse"></div>
    </teleport>
  </div>
  <div v-for="(item, index) in arr.to" :key="index">
    {{ item.a + item.b }}
  </div>
  <button @click="go">去关于</button>
  <button @click="go2">登录</button>
  <button @click="go3">改变</button>
  <div style="height:2000px"></div>
</template>
<script setup lang= 'ts' name = 'HelloWorld'>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import poster from '@/assets/family.png';
import useIntersection from "@/hooks";
import Player from "xgplayer";
interface Arr {
  a: string;
  b: any;
}
let t = ref<string>('1')
const go3 = () => {
  arr.to.push({ a: '222', b: '22333' })
  console.log(arr)
};
const show = ref(false);
const videoDv = ref(null);
const router = useRouter();
const arr = reactive<{ to: Arr[] }>({
  to: [
    { a: "5", b: 2 },
    { a: "3", b: 4 },
  ],
});
const go = () => {
  router.push({
    path: "/about",
    query: {
      username: "周诺宝宝",
      password: 284552,
    },
  });
};
const go2 = () => {
  // const o = { redirect: undefined,path: '/liming',name: 'LiMing',dirName:'views',meta:{keepAlive: false}}
  // router.addRoute('Home',o)
  router.push({
    path: "/login",
    query: {
      username: "宝宝",
      password: 284552,
    },
  });
};

useIntersection(videoDv, show);
onMounted(
   function a (){
    const player = new Player({
      width: "100%",
      height: "100%",
      id: "mse",
      url: "https://media.w3.org/2010/05/sintel/trailer.mp4",
      // poster: require('../../assets/family.png'),
      poster: poster,
      // autoplay: true
    });
  }
);
</script>
<style scoped lang="scss">
.video-box {
  width: 800px;
  height: 500px;
}

.show-dv {
  width: 400px;
  height: 300px;
  position: fixed;
  bottom: 50px;
  right: 40px;
  // background-color: blue;
}
</style>